<template>
  <div class="covid-form-wrapper">
    <div class="order-item">
      <h3>体检项目</h3>
      <div class="check-top">
        <div class="left">{{appInfo.testprice.cname}}</div>
        <div class="right"><span class="price">{{appInfo.testprice.value}}元/次</span></div>
      </div>
    </div>

    <div class="common-panel">
        <van-field
          v-model="userTypeLabel"
          name="usertype"
          label="所属身份"
          readonly
          required
          placeholder="用户名"
          @click="handleShow('usertype')"
          :rules="[{ required: true, message: '请填写用户所属身份' }]"
        />
        <van-field
          v-model="form.name"
          type="text"
          name="name"
          label="姓名"
          required
          placeholder="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="form.id_number"
          type="text"
          name="id_number"
          required
          label="身份证号"
          placeholder="身份证号"
          :rules="[{ required: true, message: '请填写身份证号' }]"
        />
        <van-field
          v-model="nationLabel"
          type="text"
          name="nation"
          required
          readonly
          @click="handleShow('nation')"
          label="民族"
          placeholder="民族"
          :rules="[{ required: true, message: '请选择民族' }]"
        />
        <van-field
          v-model="is_party"
          type="text"
          name="is_party"
          label="是否为党员"
          required
          readonly
          @click="handleShow('is_party')"
          placeholder="是否为党员"
          :rules="[{ required: true, message: '是否为党员' }]"
        />
        <van-field
          v-model="form.unit"
          type="text"
          name="unit"
          label="工作单位"
          placeholder="工作单位"
        />
        <van-field
          v-model="form.profession"
          type="text"
          name="profession"
          required
          label="职业"
          placeholder="职业"
          :rules="[{ required: true, message: '请填写职业' }]"
        />
        <van-field
          v-model="form.tel"
          type="text"
          name="tel"
          required
          label="联系电话"
          placeholder="联系电话"
          :rules="[{ required: true, message: '请填写联系电话' }]"
        />
        <div class="agreement">
          <van-checkbox v-model="checked" shape="square">{{appInfo.letter.value}}</van-checkbox>
        </div>
    </div>
    <van-popup position="bottom" :style="{ height: '50%' }"
      v-model="popupShow">
        <van-picker
          title="标题"
          show-toolbar
          value-key="name"
          :columns="columnArray"
          @confirm="onConfirm"
          @cancel="popupShow = false"
        />

      </van-popup>

    <van-goods-action>
      <van-goods-action-icon :icon="`${staticPath}/icon_kefu@2x.png`" text="客服" @click="onClickIcon" />
      <van-goods-action-button
        :color="'linear-gradient(0deg, #FF534F 0%, #FF9C78 100%)'"
        text="提交订单"
        @click="onClickButton"
      />
    </van-goods-action>

    
  </div>
</template>

<script>
import { contentTestOptionService,contentTestServer } from '@/service/server';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      staticPath: process.env.VUE_APP_STATIC_PATH,
      message:'',
      checked:false,
      actype:'',
      optionList: {},
      popupShow: false,
      userTypeLabel:'',
      is_party:'',
      nationLabel:'',
      columnArray:[],
      form:{
        userType: '',
        name: '',
        id_number: '',
        nation: '',
        is_party: '',
        unit: '',
        profession:'',
        tel: '',
        price:''
      }
    };
  },
  created(){
    this.queryOption();
    this.$store.dispatch('app/setAppInfoAction',{})
  },

  components: {
    
  },

  computed: {
    ...mapGetters(['appInfo'])
  },

  methods: {
    onConfirm(e){
      console.log(e);
      switch (this.actype) {
        case 'usertype':
          this.form.usertype = e.id;
          this.userTypeLabel = e.name
          break;
        case 'nation':
          this.form.nation = e.id;
          this.nationLabel = e.name;
          break;
        case 'is_party':
          this.form.is_party = e.id;
          this.is_party = e.name
          break;
      
        default:
          break;
      }
      this.popupShow = false
    },
    async queryOption(){
      let result = await contentTestOptionService();
      if(result.status == 200){
        this.optionList = result.data
      }
    },
    handleShow(type){
      console.log('click',type)
      this.popupShow = true;
      this.actype = type;
      switch (type) {
        case 'usertype':
          this.columnArray = this.optionList.type
          break;
        case 'nation':
          this.columnArray = this.optionList.nation
          break;
        case 'is_party':
          this.columnArray = this.optionList.is_party
          break;
      
        default:
          break;
      }
    },
    onClickIcon(){},
    async onClickButton(){
      let params = Object.assign({},this.form)
      params.price = this.appInfo.testprice.value;
      let result = await contentTestServer(params);
      if(result.status == 200){
        this.$router.replace({
          path: `/user/covid/success?name=${this.form.name}&tel=${this.form.tel}&id_number=${this.form.id_number}`
        })
      }
    },
    handleSelectTime(index,item){
      console.log(index,item,'handleSelect')
    },
    handleSelectDate(index,item){
      console.log(index,item,'handleSelect')
    },
  },
};
</script>
<style lang='less'>

.covid-form-wrapper{
  background: #f5f5f5;
  .agreement{
    padding: 0 15px;
    .van-checkbox__label{
      color: #999;
    }
  }
  .textarea{
    background: transparent;
    border: 1px solid #f5f5f5;
  }
  .order-item{
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    background: #fff;
    padding: 15px;
    h3{
      font-size: 20px;
      color: #000;
    }
    .check-top{
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      margin-top: 20px;
      .left{
        flex: 1;
      }
      .right{        
        .price{
          color:#E02E2E;
          font-size: 15px;
        }
      }
    }
    .order-left{
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      height: 102px;
      .bottom-con{
        .price-wrapper{
          .price{
            color: #ff0000;
            font-size: 16px;
          }
          .line-price{
            color: #999;
            font-size: 13px;
            margin-left: 10px;
          }
        }
      }
      .top-con{
        height: 80%;
        flex: 1;
        .title{
          font-size: 16px;
          color: #000;
          margin-bottom: 10px;
        }
        .desc{
          color: #999;
          font-size: 13px;
          line-height: 1.5;
        }
      }
    }
  }
  .common-panel {
    margin-top: 10px;
    background: #fff;
    padding: 15px 0;
    .van-cell{
      background: #fff;
    }
  }
  .panel-cell{
    margin-top: 10px;
    .van-cell{
      background: #fff;
    }
  }
  .huli-common-title {
    margin-bottom: 15px;
    .right-arrow {
      display: flex;
      justify-content: flex-end;
      color: #999;
      font-size: 13px;
      flex: 1;
    }
    h3 {
      font-size: 16px;
      margin-bottom: 15px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      em {
        display: inline-block;
        width: 5px;
        height: 17px;
        background: linear-gradient(0deg, #fcc9cb, #f7757b);
        border-radius: 5px;
        margin-right: 6px;
      }
    }
  }
}
</style>